{% extends 'bootstrap-modal-layout.html.twig' %}

{% set modal_class = 'cd-modal-dialog' %}

{% block title %}
  {{'user.settings.security.mobile_bind'|trans}}
{% endblock %}

{% do script(['libs/jquery-validation.js','app/js/settings/bind-mobile/index.js'])%}

{% block body %}
  <form id="bind-mobile-form" method="post" action="{{ path('settings_bind_mobile') }}">
    {% if verifiedMobile | length > 0 %}
      <div class="form-group cd-form-group">
        <label class="readonly">{{'user.settings.security.bind_mobile'|trans}}</label>
        <input type="text" class="form-control" value="{{blur_phone_number(verifiedMobile)}}" readonly>
      </div>
    {% endif %}

    <div class="form-group cd-form-group">
      <label for="password">{{'user.settings.security.login_password'|trans}}</label>
      <input type="password" id="password" name="password" class="form-control" data-url="{{ path('settings_check_login_password') }}">
    </div>

    <div class="form-group cd-form-group">
      <label for="mobile">{{'user.settings.security.mobile'|trans}}</label>
      <input type="text" id="mobile" name="mobile" data-url="{{path('register_email_or_mobile_check')}}" class="form-control" data-role="mobile">
    </div>

    {% if (setting('auth.captcha_enabled')|default(0)) == 1 %}
      <div class="form-group cd-mb24 js-drag-jigsaw hidden">
        {% include 'common/drag.html.twig' with { auth: true } %}
      </div>
    {% endif %}

    <div class="form-group cd-form-group cd-form-group-action cd-mb24">
      <label for="sms_code">{{'user.settings.security.sms_code'|trans}}</label>
      <input type="text" id="sms-code" name="sms_code" class="form-control" data-url="{{path('edu_cloud_sms_check',{type:'sms_bind'})}}">
      <div class="action-button">
        <button type="button" class="btn cd-btn cd-btn-ghost-primary btn-block js-sms-send" disabled  data-url="{{ path('edu_cloud_sms_send_check_captcha') }}">
          <span id="js-time-left"></span>
          <span id="js-fetch-btn-text">{{'user.settings.security.get_sms_code_btn'|trans}}</span>
        </button>
      </div>
    </div>

    <input type="hidden" name="_csrf_token" value="{{ csrf_token('site') }}">
  </form>
{% endblock %}

{% block footer %}
  <button type="button" class="btn cd-btn cd-btn-flat-default cd-btn-lg" data-dismiss="modal">
    {{'form.btn.cancel'|trans}}
  </button>
  <button id="submit-btn" type="button" class="btn cd-btn cd-btn-primary cd-btn-lg" data-toggle="form-submit"  data-target="#bind-mobile-form" data-loading-text="{{'form.btn.save.submiting'|trans}}">
    {{'form.btn.submit'|trans}}
  </button>
{% endblock %}
